<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
  事件处理
监听事件
我们可以使用 v-on 指令(简写为 @)来监听 DOM 事件，并在事件触发时执行对应的JavaScript。用法:v-on:click="methodName"或 @click="handler"
事件处理器的值可以是:
1.内联事件处理器:事件被触发时执行的内联 JavaScript 语句(与 onclick 类似)。
2.方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

 -->
    <div id="app">
        <!-- 表达式内联写法 -->
        <button @click="count++">增加 1</button>
        <p>这个按钮被点击了 {{ count }} 次。</p>

        <!-- 下面这个也是内联写法 函数表达式，功能最强，除了evt,还可以传自定义参数-->
        <button @click="handleAdd2()">add2</button>

        <!-- 方法事件处理器 ,能拿到事件对象evt.target-->
        <button @click="handleAdd3">add3</button>


        <ul @click="handleUlClick">
            <li @click="handleClick(1,2,3,$event)">11111</li>
            <!-- 以前不支持下面这种写法，现在支持 -->
            <li @click="(evt)=>{console.log(evt)}">22222</li>
            <!-- 以前支持下面这种写法 -->
            <li @click="(evt)=>handleClick2(1,2,3,evt)">33333</li>
        </ul>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                handleAdd2() {
                    this.count += 2
                },
                handleAdd3(evt) {
                    console.log(evt.target);
                    this.count += 3
                },
                handleClick(a, b, c, evt) {
                    console.log(a, b, c);
                    console.log(evt.target)
                },
                handleClick2(a, b, c, evt) {
                    console.log(a, b, c);
                    console.log(evt.target)
                        // evt的重要性，可阻止冒泡,但可以用事件修饰符，更简单见下一内容。
                    evt.stopPropagation()
                },
                handleUlClick() {
                    console.log('ul被点击了');
                }
            }
        }
        var app = Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>